<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
<b>本机MAC地址是: 666666666666</b><br>
<button id="refreshQr">刷新二维码</button>&nbsp;<button id="logout">注销登录</button><br/>
<h2>二维码状态：</h2>
<h3 style="color: lightskyblue" id="msg"></h3><br/>
<img id="qrImg" width="350" src="file://D:\\LenovoQMDownload\\dc301b51.png" alt="我是二维码 扫我">
<input type="hidden" value="" id="qrId"><br/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var getQrStatus;
    $(document).ready(function(){
        genQr()
        $("#logout").hide();
    });

    $("#refreshQr").click(() => {
        $("#qrImg").show();
        genQr()
    });

    $("#logout").click(() => {
        $.ajax(
            {
                url: 'http://localhost:8080/logout',
                type: 'GET',
                data: {
                    userId: 1
                },
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    clearInterval()
                    genQr()
                }
            }
        );
        $("#refreshQr").show();
        $("#qrImg").show();
    });



    function genQr() {
        $.ajax(
            {
                url: 'http://localhost:8080/get_qr_code',
                type: 'POST',
                data: JSON.stringify({
                    deviceInf: '666666666666',
                    deviceType: 'PC'
                }),
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    clearInterval()
                    $("#qrImg").attr("src", res.url);
                    $("#qrId").val(res.qrId);
                    $("#msg").text('待扫码')
                    // 设置qrid和图片地址
                    getQrStatus = setInterval(function(){ getQrTokenStatus() }, 2500);
                }
            }
        );
    }

    function getQrTokenStatus() {
        var qrId = document.getElementById('qrId').value;
        $.ajax(
            {
                url: 'http://localhost:8080/get_qr_code_status',
                type: 'GET',
                data: {
                    qrId: qrId
                },
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    console.log(res)
                    if (res.success === true) {
                        if (res.status === 0) {
                            $("#msg").text('待扫码')
                        } else if (res.status === 1) {
                            $("#msg").text('已扫码，待确认')
                            $("#qrImg").hide();
                            $("#refreshQr").hide();
                        } else if (res.status === 2) {
                            $("#msg").text('扫码已确认，您已登录, 拿到的token:' + res.token + ', 即将跳转到主界面，请保存好token')
                            $("#qrImg").hide();
                            $("#logout").show();
                            $("#refreshQr").hide();
                        } else {
                            $("#msg").text('二维码已失效，请重新刷新')
                            $("#refreshQr").show();
                        }
                    } else {
                        $("#msg").text('二维码已失效，请重新刷新')
                        $("#refreshQr").show();
                    }

                }
            }
        );
    }
</script>
</body>
</html>